<#import "/admin/_layout.html" as layout>
<@layout.header "商品编辑">
    <link href="/static/libs/selectize/css/selectize.css" rel="stylesheet">
    <link href="/static/libs/selectize/css/selectize.jeegot.css" rel="stylesheet">
    <link href="/static/libs/sku/sku_style.css" rel="stylesheet"/>
</@layout.header>
<@layout.body>
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-left">
                        <li class="breadcrumb-item"><a href="#">商品</a></li>
                        <li class="breadcrumb-item active">编辑</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <section class="content">
        <div class="container-fluid">

            <div class="card card-primary card-outline card-outline-tabs">
                <ul class="nav nav-tabs">
                    <li class="nav-item"><a class="nav-link active" href="#timeline" data-toggle="tab">商品属性</a></li>
                    <li class="nav-item"><a class="nav-link" href="#categoryAndTag" data-toggle="tab">分类/规格</a></li>
                    <li class="nav-item"><a class="nav-link" href="#activity" data-toggle="tab">商品详情</a></li>
                </ul>
                <form id="myForm" method="POST" action="/admin/product/doSave">
                    <input type="hidden" name="id" value="${(product.id)!}">
                    <input type="hidden" id="skuItems" name="skuItems" value="${(skuItems)!}">
                    <div class="tab-content">
                        <div class="active tab-pane fade show" id="timeline">
                            <div class="col-12" style="padding: 10px 10px 10px 10px;">
                                <div class="form-group">
                                    <label for="title">商品标题</label>
                                    <input type="text" name="title" class="form-control" id="title" value="${(product.title)!}" placeholder="请输入商品标题">
                                </div>
                                <div class="form-group">
                                    <label for="summary">商品摘要</label>
                                    <textarea rows="2" name="summary" class="form-control" id="summary" placeholder="请输入商品摘要">${(product.summary)!}</textarea>
                                </div>
                                <div class="box box-solid" style="width: 200px;">
                                    <div class="box-header with-border ">
                                        <label for="isAdmin">缩略图</label>
                                    </div>
                                    <div class="box-body no-padding">
                                        <img src="${(product.thumbUrl)!'/static/img/default.jpg'}"
                                             style="width: 100%;height: 200px"
                                             id="thumbnail">
                                        <input type="hidden" value="${(product.thumbnail)!}" name="thumbnail" id="articleThumbnail">
                                    </div>
                                    <div class="box-footer">
                                        <button type="button" class="btn-image-browser btn btn-default btn-sm "
                                                for-src="thumbnail"
                                                for-input="articleThumbnail">选择图片
                                        </button>
                                        <a href="javascript:;" style="padding-left: 15px" id="removeThumbnail">移除</a>
                                    </div>
                                </div>
                                <div class="box box-solid" style="padding-top: 5px; padding-bottom: 5px;">
                                    <div class="box-header with-border">
                                        <label class="box-title">轮播图</label>
                                    </div>
                                    <div class="box-body ">
                                        <div class="box-body ">
                                            <#if images??>
                                                <#list images as image>
                                                    <div class="img-wrapper img-hover" draggable="true" ondrop="drop(event,this)" ondragover="allowDrop(event)"  ondragstart="drag(event, this)">
                                                        <img src="/static/${(image.imagePath)!}">
                                                        <input type="hidden" name="imageSrcs" value="${(image.imagePath)!}" />
                                                        <input type="hidden" name="imageIds" value="${(image.id)!}" />
                                                        <i class="fa fa-fw fa-remove image-reset" ></i>
                                                    </div>
                                                </#list>
                                            </#if>
                                            <div class="img-wrapper img-hover" style="cursor: pointer">
                                                <img src="/static/img/chose-image-btn.png" class="choseImage">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="sortNum">排序号</label>
                                    <input type="number" name="sortNum" class="form-control" id="sortNum" value="${(product.sortNum)!}" placeholder="请输入商品排序号">
                                </div>
                                <div class="form-group">
                                    <label for="viewCount">展示浏览量</label>
                                    <input type="number" name="viewCount" class="form-control" id="viewCount" value="${(product.viewCount)!0}" placeholder="请输入商品展示浏览量">
                                </div>
                                <div class="form-group">
                                    <label for="realViewCount">真实浏览量</label>
                                    <input type="number" name="realViewCount" class="form-control" readonly id="realViewCount" value="${(product.realViewCount)!0}">
                                </div>
                                <div class="form-group">
                                    <label for="salesCount">展示销量</label>
                                    <input type="text" name="salesCount" class="form-control" id="salesCount" placeholder="请输入展示销量" value="${(product.salesCount)!0}">
                                </div>
                                <div class="form-group">
                                    <label for="realSalesCount">真实销量</label>
                                    <input type="text" name="realSalesCount" class="form-control" readonly id="realSalesCount" value="${(product.realSalesCount)!0}">
                                </div>

                                <#if postageTemplates?? && (postageTemplates?size>0)>
                                    <div class="form-group">
                                        <#assign _postageTemplateId=(product.postageTemplateId)!0 />
                                        <label for="postageTemplateId">运费模板</label>
                                        <select class="form-control" id="postageTemplateId" name="postageTemplateId">
                                            <option value="">请选择</option>
                                            <#list postageTemplates as item>
                                                <option value="${(item.id)!}" <@selectedIf value=(_postageTemplateId == item.id)/>>${(item.templateName)!}</option>
                                            </#list>
                                        </select>
                                    </div>
                                </#if>

                                <div class="form-group">
                                    <#assign _status=(product.status)!"publish" />
                                    <label for="status">状态</label>
                                    <select class="form-control" id="status" name="status">
                                        <option value="publish" <@selectedIf value=(_status =="publish")/>>发布</option>
                                        <option value="draft" <@selectedIf value=(_status =="draft")/>>草稿</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade show" id="categoryAndTag">
                            <div class="col-12" style="padding: 10px 10px 10px 10px;">
                                <#function isCheckedCategory categoryId>
                                    <#if categories?? && (categories?size>0)>
                                        <#list categories as item>
                                            <#if item.id == categoryId>
                                                <#return "checked">
                                            </#if>
                                        </#list>
                                    </#if>
                                    <#return "">
                                </#function>
                                <div class="form-group">
                                    <label for="productCategory">分类</label>
                                    <div class="form-check col-12">
                                    <#if categoryList?? && (categoryList?size>0)>
                                        <#list categoryList as item>
                                            <div class="col-2">
                                                <input class="form-check-input" id="productCategory_${item.id!}" type="checkbox" ${isCheckedCategory(item.id!)} name="productCategory" value="${item.id!}">
                                                <label class="form-check-label" for="productCategory_${item.id!}">${item.title!}</label>
                                            </div>
                                        </#list>
                                    <#else>
                                        <div>无分类可选</div>
                                    </#if>
                                    </div>
                                </div>

                                <div class="box box-solid">
                                    <label>标签</label>
                                    <div class="box-body">
                                        <select class="form-control product-tags" multiple="multiple" name="productTag">
                                            <#if tags??>
                                                <#list tags as item>
                                                    <option value="${item.title!}" selected>${item.title!}</option>
                                                </#list>
                                            </#if>
                                        </select>
                                        <p class="help-block">多个标签请用“回车键”隔开。</p>

                                        <div class="tags">
                                            <#if tagList?? && (tagList?size>0)>
                                                <#list tagList as item>
                                                    <a href="javascript:;" class="newTag">${item.title!}</a>
                                                </#list>
                                            </#if>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="col-sm-12" style="padding: 10px 10px 10px 10px;">
                                <div class="box box-solid">
                                    <div class="box-header with-border">
                                        <label class="box-title">规格</label>
                                    </div>
                                    <div class="box-body ">
                                        <div class="box-body sku-div">
                                            <#if specs?? && (specs?size>0)>
                                                <#list specs as spec>
                                                    <ul class="SKU_TYPE">
                                                        <li is_required='1' propid='${(spec.id)!}' sku-type-name="${(spec.specName)!}">${(spec.specName)!}：</li>
                                                    </ul>
                                                    <#if spec.specValues??>
                                                        <ul>
                                                            <#list spec.specValues as specValue>
                                                                <li><label><input type="checkbox" <#if skuItems?? && skuItems?contains(specValue.specValueName)>checked="checked"</#if> class="sku_value" propid='${(spec.id)!}' propvalid='${(specValue.id)!}' value="${(specValue.specValueName)!}" />${(specValue.specValueName)!}</label></li>
                                                            </#list>
                                                        </ul>
                                                    </#if>
                                                    <div class="clear"></div>
                                                </#list>
                                                <div id="skuTable"></div>
                                            <#else>
                                                <div>无规格可选&nbsp;<a href="/admin/product/spec/edit">创建规格</a></div>
                                            </#if>

                                        </div>
                                    </div>
                                </div>

                                <div id="priceDiv">
                                    <div class="form-group">
                                        <label for="price">销售价</label>
                                        <input type="number" name="price" class="form-control" id="price" value="${(product.price)!0}" placeholder="请输入商品销售价格">
                                    </div>
                                    <div class="form-group">
                                        <label for="originPrice">市场价</label>
                                        <input type="number" name="originPrice" class="form-control" id="originPrice" value="${(product.originPrice)!0}" placeholder="请输入市场价">
                                    </div>
                                    <div class="form-group">
                                        <label for="stockNum">库存</label>
                                        <input type="number" name="stock" class="form-control" id="stock" value="${(product.stock)!0}" placeholder="请输入库存">
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="tab-pane fade show" id="activity">
                            <div class="form-group">
                                <textarea class="form-control" id="editor1" name="contentHtml" style="height: 467px;width: 100%;background-color: white">${(product.contentHtml)!}</textarea>
                            </div>
                        </div>
                    </div>

                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <#if productSkuList??>
        <#list productSkuList as skuItem>
            <input type="hidden" class="sel_sku_item" properties="${(skuItem.skuProperties)!}" value="${(skuItem.skuName)!}" price="${(skuItem.price)!}" marketPrice="${(skuItem.originPrice)!}" stock="${(skuItem.stock)!}">
        </#list>
    </#if>

    <script id="imageItem" type="text/tmpl">
	<div class="img-wrapper img-hover" draggable="true" ondrop="drop(event,this)" ondragover="allowDrop(event)"  ondragstart="drag(event, this)">
        <img src="{{imageShowPath}}">
        <input type="hidden" name="imageSrcs" value="{{imagePath}}" />
        <input type="hidden" name="imageIds" value="0" />
        <i class="fa fa-fw fa-remove image-reset" ></i>
        </div>
    </script>

</@layout.body>
<@layout.script>
    <script src="/static/libs/ckeditor/ckeditor.js"></script>
    <script src="/static/libs/selectize/selectize.min.js"></script>
    <script src="/static/libs/sku/createSkuTable.js"></script>
    <script src="/static/libs/sku/customSku.js"></script>
    <script src="/static/libs/sku/getSetSkuVals.js"></script>
    <script>

        $(".choseImage").on("click", function () {
            var html = $("#imageItem").html();
            layer.data.src = null;
            layer.open({
                type: 2,
                title: '选择图片',
                anim: 2,
                shadeClose: true,
                shade: 0.5,
                area: ['90%', '90%'],
                content: '/admin/attachment/browse',
                end: function () {
                    if (layer.data.src != null) {
                        var src = jeegot.spath + layer.data.src;
                        html = html.replace(/{{imageShowPath}}/g, src);
                        html = html.replace(/{{imagePath}}/g, layer.data.src);
                        $(".choseImage").parent().before(html);
                    }
                }
            });
        });

        $('body').on('click', '.image-reset', function (event) {
            event.currentTarget.parentElement.remove();
        });

        function allowDrop(e) {
            e.preventDefault();
        }
        var dragdiv = null;
        function drag(e, dom) {
            dragdiv = dom;
        }

        function drop(e, dom) {
            $(dom).before($(dragdiv).prop("outerHTML"));
            $(dragdiv).remove();
        }

        $("#removeThumbnail").on("click", function () {
            $("#thumbnail").attr("src", "/static/img/default.jpg");
            $("#articleThumbnail").val("");
        })
        initEditor('editor1', 467, "html");
        $(function () {
            submitForm({
                title: { required: true},
                thumbnail: { required: true},
                summary: { required: true},
                contentHtml: { required: true},
            }, {
                title: {required: "请输入商品标题"},
                thumbnail: {required: "请选择商品缩略图"},
                summary: {required: "请输入商品摘要"},
                contentHtml: {required: "请输入商品详情"}
            }, undefined, function(){
                var skuArr = new Array();
                $("tr[class*='sku_table_tr']").each(function(){
                    //var propids = $(this).attr("propids");//SKU类型主键
                    //var propvalids = $(this).attr("propvalids");//SKU值主键
                    var skuName = $(this).attr("skuname");//SKU name
                    var skuProperties = $(this).attr("properties");//SKU properties
                    console.log("skuname:" + skuName);
                    console.log("skuProperties:" + skuProperties);
                    var price = $(this).find(".setting_sku_price").val();
                    var marketPrice = $(this).find(".setting_sku_market_price").val();
                    var stock = $(this).find(".setting_sku_stock").val();
                    console.log("price:" + price + ",marketPrice:" + marketPrice);
                    console.log("stock:" + stock);
                    var entity = {};
                    entity.skuName = skuName;
                    entity.skuProperties = skuProperties;
                    entity.price = price;
                    entity.marketPrice = marketPrice;
                    entity.stock = stock;
                    skuArr.push(entity);
                });
                var skuArrStr = JSON.stringify(skuArr);
                console.log("skuArrStr:" + skuArrStr)
                $("#skuItems").val(skuArrStr);
            })
        });

        var skuItems = '${(skuItems)!}';
        if(skuItems){
            $("#priceDiv").hide();
            createTable();
        }

        var $select = $('.product-tags').selectize({
            plugins: ['remove_button'],
            delimiter: ',',
            persist: false,
            addPrecedence: true,
            create: true,
            render: {
                option_create: function (data, escape) {
                    return '<div class="create" style="padding-left: 5px"> 添加标签：<strong style="color: #DD1144">' + escape(data.input) + '</strong> &hellip; </div>';
                }
            }
        });

        var selectize = $select[0].selectize;

        $(".newTag").each(function () {
            $(this).on('click', function () {
                selectize.createItem($(this).text());
            })
        });
    </script>
</@layout.script>